<template>
  <Page :back="true">
    <van-form @submit="onSubmit" class="pt-4">
      <van-cell-group inset>
        <van-field
            size="large"
            v-model="item.name"
            name="姓名"
            label="姓名"
            placeholder="姓名"
            :rules="[{ required: true, message: '请填写姓名' }]"
            clearable
        />
        <van-field
            size="large"
            v-model="item.mobile"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
            clearable
        ><template #button>
          <van-button size="small" type="primary" ref="btnSend" :loading="sendLoading" @click="onSend">{{ sendLoading ? '发送中' : (timer ? '剩余' + downtime + '秒' : '发送验证码')}}</van-button>
        </template>
        </van-field>
        <van-field
            size="large"
            v-model="item.vcode"
            name="验证码"
            label="验证码"
            placeholder="请填写验证码"
            :rules="[{ required: requireSend, message: '请填写手机号' }]"
            clearable
        />
      </van-cell-group>
      <div style="margin: 1rem;">
        <van-button round block type="primary" native-type="submit" :loading="store.state.loading.statuses['user_info_update']">
          提交
        </van-button>
      </div>
    </van-form>
  </Page>
</template>

<script setup>
import {computed, ref} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import Page from "../components/Page.vue"
import apis from "../apis"

const router = useRouter()

const store = useStore()

const sendLoading = computed(() => {
  return store.state.loading.statuses['send_code']
})

const requireSend = computed(() => {
  return defaultItem.mobile != item.value.mobile
})

const btnSend = ref(null)

let defaultItem = {
  name: '',
  mobile: '',
  gender: null,
  vcode: null,
}

const item = ref(null)
const reset = () => {
  return item.value = JSON.parse(JSON.stringify(defaultItem))
}
reset()

const refresh = () => {
  apis.user_info.show({label: 'user_info_get', show_loading: true}).then((resp) => {
    const result = resp.data
    let data = result.data || reset()
    data.vcode = null
    defaultItem = JSON.parse(JSON.stringify(data))
    item.value = data
  })
}
refresh()

const onSubmit = () => {
  if (item.value.id) {
    apis.user_info.update(item.value, {label: 'user_info_update', show_loading: true}).then(() => {
      if (store.getters.getStatus('return')) {
        router.back()
      }
    })
  } else {
    apis.user_info.save(item.value, {label: 'user_info_update', show_loading: true}).then(() => {
      if (store.getters.getStatus('return')) {
        router.back()
      }
    })
  }
}

const timer = ref(0)
const downtime = ref(60)
const onSend = () => {
  if (!timer.value) {
    let start = () => {
      timer.value = setTimeout(() => {
        downtime.value = downtime.value - 1
        console.log(downtime.value)

        if (downtime.value > 0) {
          start()
        } else {
          timer.value = 0
          downtime.value = 60
        }
      }, 1000)
    }
    apis.sms.send({mobile: item.value.mobile}, {label: 'send_code'}).then(({data: result}) => {
      let data = result.data
      console.log(data)
      start()
    })
  }
}
</script>

<style scoped>

</style>